<template>
  <div>
    <h1>干净的脚手架什么都没有</h1>
    <div class="wrap">
      <div class="inner">111</div>
      <div class="inner1">222</div>
    </div>
    <div class="box"></div>
    <hr />
    <child-one></child-one>
    <learn-dirctive></learn-dirctive>
    <text-html></text-html>
  </div>
</template>

<script>
import ChildOne from "./components/ChildOne.vue";
import LearnDirctive from "./components/LearnDirctive.vue";
import TextHtml from "./components/TextHtml.vue";

export default {
  name: "App",
  components: {
    ChildOne,
    LearnDirctive,
    TextHtml,
  },
};
</script>
    

<style lang='less' scoped>
/* 
style当中写css
lang后面填写的就是预处理语言
sass less stylu  
scoped防止污染 意思 样式只在当前组件起作用

简介一下loader
less-loader
webpack打包工具  将浏览器不能识别的文件转变浏览器可以识别的 html css js
webpack高度可配需要配置相关的loader loader帮我们将不能识别的文件转换为能识别的文件
less 需要转换为 css 在浏览器中渲染
webpack中配置的less-loader 将less 转变为css
less-loader 和less供webpack使用   将less 转变为css


*/
/* .wrap {
  width: 100px;
  height: 100px;
  background-color: red;
}
.wrap .inner {
  height: 50px;
  width: 50px;
  background-color: yellow;
} 
.wrap .inner1{

}*/
// 预防样式权重不够，能展示你想展示的样式
// npm install -D less-loader@5 less@3
// less 兄弟元素并列写  父子元素嵌套写
.wrap {
  width: 100px;
  height: 100px;
  background-color: green;
  .inner {
    width: 50px;
    height: 50px;
    background-color: pink;
  }
  .inner1 {
    width: 50px;
    height: 50px;
    background-color: yellow;
  }
}
.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}
// 穿透样式  样式击穿  加上了scoped之后，父组件当中的样式在子组件当中起作用
// deep   /deep/  >>>  ::deep
/deep/ .box {
  width: 50px;
  height: 50px;
  background-color: purple;
}
</style>